<!--
 * @Author: 谢小康 2170673706@qq.com
 * @Date: 2024-01-12 15:30:33
 * @LastEditors: 谢小康 2170673706@qq.com
 * @LastEditTime: 2024-02-03 18:17:47
 * @FilePath: \My-bolg\My_Blog\src\views\Notes.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE 
-->
<template>
    <div class="bkc">

        <img src="http://imgfile.xxkdjy.top/danmu.png">
    </div>
    <div class="bigbox">
        <div class="topdanmu">
            <vue-danmaku ref="danmakuRef" v-model:danmus="danmus" isSuspend useSlot loop randomChannel :channels="0"
                style="height:100%; width:100%;">
                <template v-slot:dm="{ index, danmu }">
                    <div class="danmuitem">
                        <el-avatar :size="30" :src="danmu.avatar" />
                        <div class="tex">{{ danmu.text }}</div>
                    </div>
                </template>
            </vue-danmaku>
            <div class="box">
                <div class="title">留言</div>
                <div class="inputboxx">
                    <input type="text" v-model="input">
                    <div @click="setdanmu">发射</div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="content-box">
                <comment :isshowhead="false" :istoshowcomment="true" @changeshowcomment="changeshowcomment" fontsize="m"
                    :typeobj="{ type: 3, id: 1 }" :pageinfo="pageinfo">
                    <template #defult>
                        <div class="comment-box">
                            <input type="text" placeholder="昵称(必填)" v-model="form.username" class="username">
                            <el-input v-model="form.input" resize="none" type="textarea" placeholder="说点什么吧..."
                                maxlength="200" ref="textarea" />
                        </div>
                        <div class="buttom">
                            <span @click="showemoji"><i class="iconfont icon-icon_xinqing"></i>表情</span>
                            <el-button type="primary" size="small" @click="subcomment()">提交</el-button>
                        </div>
                        <emoji size="m" :isshow="isshowemoji" :content="emojis" @changeemoji="changeemoji"></emoji>
                    </template>
                </comment>
            </div>
            <Paging :size="pageinfo.pageSize" :current="pageinfo.page" :totalsize="pageinfo.totalsize"
                @changepages="changepages"></Paging>
        </div>

    </div>
</template>

<script setup>
import { onMounted, ref, inject } from 'vue';
import vueDanmaku from 'vue3-danmaku'
import comment from '../components/comment.vue'
import Paging from '../components/Paging.vue'
import { getliuyanunm, addcomment, adddanmu, getdanmu } from "@/api/article.js"
const danmus = ref([])
let reload = inject('reload')
let textarea = ref()
let isshowemoji = ref(false)
let emojis = ref([]);
let input = ref("")
function changeemoji(item) {
    form.value.input += item.pop();
    textarea.value.focus();
}
function showemoji() {
    isshowemoji.value = !isshowemoji.value;
}
async function setdanmu() {
    if (input.value == "") {
        ElNotification.warning({
            title: '失败',
            message: '请输入内容',
            offset: 50,
        })
    } else {
        let res = await adddanmu({
            content: input.value,
        })
        if (res.data.status != 200) {
            ElNotification.warning({
                title: '失败',
                message: '评论失败',
                offset: 50,
            })
        }
    }
    input.value = ""
}
let pageinfo = ref({
    pageSize: 10,
    page: 1,
    totalsize: 0
})
let form = ref({
    input: "",
    username: "",
    usersiteurl: "",
    usercover: "",
})
async function subcomment() {
    if(localStorage.getItem("isLogin")){
        let user = JSON.parse(localStorage.getItem("userinfo"))
        form.value.username = user.username
        form.value.usercover = user.Users_corver
    }
    if (form.value.input.trim() == "" || form.value.username.trim() == "") {
        ElNotification.warning({
            title: '失败',
            message: '请输入内容',
            offset: 50,
        })
        return
    } else {
        let res = await addcomment({
            type: 3,
            forid: 1,
            content: form.value.input,
            username: form.value.username,
            usersiteurl: form.value.usersiteurl,
            usercover: form.value.usercover
        })
        if (res.data.status == 200) {
            ElNotification.success({
                title: 'Success',
                message: '评论成功',
                offset: 50,
            })
            resetform()
        } else {
            ElNotification.warning({
                title: 'warning',
                message: '评论失败',
                offset: 50,
            })
            resetform()
        }
        reload()
    }
}
function resetform() {
    form.value.input = "";
    form.value.username = "";
    form.value.usercover = "";
    form.value.usersiteurl = "";
}
function changepages(value) {
    pageinfo.value.page = value;
}
onMounted(async () => {
    let ress = await getdanmu()
    if (ress.data.status == 200) {
        let data = ress.data.data

        danmus.value = data.map(async item => {
          
            let num = Math.floor(Math.random() * 5 + 1)
            
            let file = await import(`@/assets/img/avager/${num}.jpg`);
            return {
                avatar: file.default,
                text: item.content,
            }
        })
        danmus.value = await Promise.all(danmus.value)
    };
    let res = await getliuyanunm()
    if (res.data.status == 200) {
        pageinfo.value.totalsize = res.data.data
    }
})
</script>

<style lang="scss" scoped>
.username {
    width: 98%;
    height: 30px;
    border-radius: 15px;
    outline: none;
    border: 0px;
    margin-bottom: 5px;

    @include userTheme {
        font-family: getThemeValue("fontfamily");
    }

    border: 2px solid #e1e1e4;

    &:hover {
        border: 2px solid #a8abb2;
    }
}

:deep(.el-textarea__inner) {
    color: #000000;
    font-size: 14px;
    height: 150px;

    font-size: $font-size-m;

    @include userTheme {
        font-family: getThemeValue("fontfamily");
    }

    border-radius: 15px;
}

.bkc {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;

    img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }


}

.danmuitem {
    padding: 5px 10px;
    background: rgba(0, 0, 0, .2);
    z-index: 0;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
    -ms-transition: .5s;
    transition: .5s;
    border-radius: 20px;
    display: flex;
    align-items: center;

    .tex {
        font-size: $font-size-m;

        @include userTheme {
            font-family: getThemeValue("fontfamily");
        }

    }
}

.bigbox {
    width: 100%;
    margin-bottom: 5px;

    .topdanmu {
        height: 100vh;
        width: 100%;
        position: relative;
        padding-top: 40px;

        &::after {
            content: '';
            position: absolute;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            background: rgba(0, 0, 0, .1);
            z-index: 0;
            -webkit-transition: .5s;
            -moz-transition: .5s;
            -o-transition: .5s;
            -ms-transition: .5s;
            transition: .5s;
            border-radius: 15px;

        }

        .box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            display: flex;
            justify-content: center;
            flex-direction: column;
            text-align: center;

            .title {
                padding-right: 35px;
                font-size: $font-size-xl;

                @include userTheme {
                    font-family: getThemeValue("fontfamily");
                }

                margin-bottom: 30px;
                text-align: center;
                color: #ffffff;
            }

            .inputboxx {
                width: 300px;
                display: flex;
                color: #ffffff;
                cursor: pointer;
                align-items: center;

                input {
                    background-color: #0000000d;
                    width: 200px;
                    height: 30px;
                    color: #ffffff;
                    border: 1px solid #ffffff;
                    padding: 0 10px;
                    outline: none;
                    font-size: $font-size-m;
                    margin-right: 15px;
                    border-radius: 15px;
                }

                div {
                    padding: 5px 10px;
                    border: 1px solid #ffffff;
                    border-radius: 15px;
                }

            }
        }
    }

    .content {
        padding: 20px 0;
        width: 100%;
        @include bk-style;
        background-color: aliceblue;

        .content-box {
            min-height: 100vh;
            padding: 20px;
            padding-top: 0px;
            margin: 0 auto;
            width: 50%;

            .buttom {
                cursor: pointer;

                @include userTheme {
                    font-family: getThemeValue("fontfamily");
                }

                display: flex;
                justify-content: space-between;
                padding: 0 10px;
                margin-bottom: 5px;

                i {
                    margin-right: 4px;
                }
            }

            .comment-box {
                position: relative;
                margin: 10px auto;

            }
        }
    }
}

@media screen and (max-width: 650px) {
    .content-box {
        width: 85% !important;
    }
}</style>